<!-- 忘记密码界面 -->
<template>
  <div id="forget">
    <div class="bg"></div>
    <el-row class="main-container">
      <el-col :lg="8" :xs="16" :md="10" :span="10">
        <div class="top">
          <i class="iconfont icon-kaoshi"></i><span class="title">在线考试系统</span>
        </div>
        <div class="bottom">
          <div class="container">
            <p class="title">找回密码</p>
            <el-form
              :model="form"
              :label-position="labelPosition"
              label-width="100px"
            >
              <el-form-item label="邮箱">
                <el-input
                  v-model="form.email"
                  placeholder="请输入注册邮箱"
                  type="email"
                ></el-input>
              </el-form-item>

              <el-form-item label="验证码">
                <el-input
                  v-model="form.code"
                  placeholder="请输入验证码"
                ></el-input>
                <el-button
                  class="code-btn"
                  :disabled="sendingCode || countdown > 0"
                  @click="sendCode"
                >
                  <span v-if="countdown === 0">获取验证码</span>
                  <span v-else>{{ countdown }}秒后重发</span>
                </el-button>
              </el-form-item>

              <el-form-item label="新密码">
                <el-input
                  v-model="form.password"
                  placeholder="请输入新密码"
                  type="password"
                  autocomplete="new-password"
                ></el-input>
              </el-form-item>

              <el-form-item label="确认密码">
                <el-input
                  v-model="form.confirmPassword"
                  placeholder="请再次输入新密码"
                  type="password"
                  autocomplete="new-password"
                ></el-input>
                <div v-if="passwordMismatch" class="warning">
                  两次输入的密码不一致
                </div>
              </el-form-item>

              <div class="submit">
                <el-button
                  type="primary"
                  class="row-submit"
                  @click="submitReset"
                >确认</el-button>
              </div>

              <div class="options">
                <div class="login-link">
                  <span>想起密码了?</span>
                  <span @click="goLogin"><a href="javascript:;">去登录</a></span>
                </div>
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "forget",
  data() {
    return {
      labelPosition: 'left',
      sendingCode: false,
      countdown: 0,
      timer: null,
      form: {
        email: '',
        code: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  computed: {
    passwordMismatch() {
      return (
        this.form.confirmPassword.length > 0 &&
        this.form.password !== this.form.confirmPassword
      )
    }
  },
  methods: {
    sendCode() {
      if (!this.form.email) {
        this.$message.warning('请先输入邮箱');
        return;
      }
      this.sendingCode = true;
      this.$axios.post('/api/customer/email', null, { 
        params: { email: this.form.email }
      }).then(res => {
          if (res.data) {
            this.$message.success('验证码已发送，请注意查收');
            this.startCountdown();
          } else {
            this.$message.error(res.data.message || '发送失败');
          }
        })
        .catch(() => {
          this.$message.error('网络错误，发送失败');
        })
        .finally(() => {
          this.sendingCode = false;
        });
    },
    startCountdown() {
      this.countdown = 60;
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    submitReset() {
      if (this.passwordMismatch) {
        this.$message.warning('两次输入的密码不一致');
        return;
      }
      if (!this.form.code) {
        this.$message.warning('请输入验证码');
        return;
      }
      this.$axios.post('/api/reset-password', {
        email: this.form.email,
        code: this.form.code,
        newPassword: this.form.password
      })
        .then(res => {
          if (res.data.success) {
            this.$message.success('重置成功，即将跳转到登录');
            this.$router.push({ path: '/login' });
          } else {
            this.$message.error(res.data.message || '重置失败');
          }
        })
        .catch(() => {
          this.$message.error('网络错误，重置失败');
        });
    },
    goLogin() {
      this.$router.push({ path: '/' });
    }
  },
  beforeUnmount() {
    if (this.timer) clearInterval(this.timer);
  }
}
</script>

<style lang="less" scoped>
#forget {
  font-size: 14px;
  color: #000;
  background-color: #fff;
}
#forget .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background: url('../../assets/img/loginbg.png') center top / cover no-repeat;
  background-color: #b6bccdd1 !important;
}
#forget .main-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#forget .top {
  margin-top: 100px;
  font-size: 30px;
  color: #ff962a;
  display: flex;
  justify-content: center;
}
#forget .top .icon-kaoshi {
  font-size: 80px;
}
#forget .top .title {
  margin-top: 20px;
}
#forget .bottom {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
  padding: 20px;
}
#forget .container .title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 30px;
}
.el-form-item {
  position: relative;
}
.code-btn {
  position: absolute;
  right: 0;
  top: 2px;
  padding: 4px 10px;
}
#forget .submit {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.row-submit {
  width: 100%;
  background-color: #04468b;
  border-color: #04468b;
  padding: 15px 20px;
}
.warning {
  color: #f56c6c;
  margin-top: 5px;
  font-size: 12px;
}
.options {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.login-link span:first-child {
  color: #8c8c8c;
}
.login-link a {
  color: #ff962a;
  text-decoration: none;
}
</style>
